import React,{PureComponent} from 'react'
import {ScrollView,StyleSheet,View,Text,TouchableOpacity,Button,Animated} from 'react-native'

import color from '../color'

type Props = {
    subjects:[],
    index:number,
    callbackSelect:Function,
}
export default class MineOrderScrollTab extends PureComponent<Props>{
    constructor(props){
        super(props)

    }


    clickCell(i){

        this.props.callbackSelect(i)

    }

    cell(data,i){
        if (i == this.props.index)
        {
            return (
                    <TouchableOpacity style={{height:25,alignItems:'center',justifyContent:'center',backgroundColor:'#D9576C',borderRadius:13}} key={data} onPress={()=>{this.clickCell(i)}}>
                        <Text  style={styles.subject_select_title}>{data}</Text>
                    </TouchableOpacity>
            )
        }else {
            return  <TouchableOpacity style={{height:25,alignItems:'center',justifyContent:'center'}} key={data} onPress={()=>{this.clickCell(i)}}>
                    <Text style={styles.subject_title}>{data}</Text>
            </TouchableOpacity>

        }
    }

    renderCell(){
       var cells = [];
        for (var i = 0; i < this.props.subjects.length; i ++){
            let data = this.props.subjects[i]
            let cell = this.cell(data,i)
            cells.push(cell)
        }
        return <View style={{alignItems:'center', justifyContent:'space-around',
             flexDirection:'row',flex:1,height:45,backgroundColor:'#F9F9F9',}}>{cells}</View>
    }

    render(){
        return (
                    <View style={styles.container}>
                            {this.renderCell()}
                    </View>

        )
    }

}
const styles = StyleSheet.create({
    container:{
        backgroundColor:'#F9F9F9',
        height:45,
        alignItems:'center',
        flexDirection:'row',

    },
    subject_title:{
      color:'rgba(0,0,0,0.8)',
        fontSize:15,
        marginLeft:12,
        marginRight:12,
    },
    subject_container_title:{
        flexDirection:'row',
    },
    subject_select_title:{
        color:'white',
        fontWeight:'bold',
        fontSize:15,
        marginLeft:10,
        marginRight:10,
    },
})